import { useSelector } from "react-redux";
import { RootState } from "@/types/store";
import classnames from "classnames";
import Icon from "@/components/icon";
import styles from "./index.module.scss";
import { addChannel, delChannel, getAllChannel } from "@/store/actions/home";
import { useInitialState } from "@/utils/use-initial-state";
import {
  Key,
  ReactElement,
  JSXElementConstructor,
  ReactNode,
  ReactPortal,
  useState,
} from "react";
import { Channel } from "@/types/data";
import { useDispatch } from "react-redux";
type Props = {
  onClose: () => void;
};
const Channels = ({ onClose }: Props) => {
  let dispatch = useDispatch();
  const { userChannel } = useSelector((state: RootState) => state.home);
  const { AllChannel } = useInitialState(getAllChannel, "home");

  // 能够切换频道编辑状态
  // 添加控制是否为编辑的状态
  // 给编辑 / 保存按钮添加点击事件
  // 在点击事件中切换编辑状态
  // 根据编辑状态判断展示保存或编辑文字内容
  const [isEdit, setIsEdit] = useState(false);
  const onChangeEdit = () => {
    setIsEdit(!isEdit);
  };
  // 点击icon图标 删除的单个频道
  const onHref = (channel: Channel) => {
    dispatch({ type: "home/changeTab", payload: channel.id + "" });
    if (channel.id === 0) return;
    if (userChannel.length <= 4) return;
    dispatch(delChannel(channel) as any);
  };
  // 点击添加频道 实现添加
  const onAddChannel = (channel: Channel, obj: any) => {
    let { seq } = obj;
    let id = channel.id;
    return () => {
      dispatch(addChannel(channel, seq, id) as any);
    };
  };
  // 筛选用户数据
  const onHomeList = (item: any) => {
    localStorage.setItem("HomeListItem", JSON.stringify(item));
    onClose();
  };
  return (
    <div className={styles.container}>
      {/* 我的频道 */}
      <div className={styles.title}>
        <h3>我的频道</h3>
        <h4>点击进入频道</h4>
        <button
          onClick={() => {
            onChangeEdit();
          }}
          className={classnames({ [styles.active]: isEdit })}
        >
          {isEdit ? "完成" : "编辑"}
        </button>
      </div>
      <div className={styles.list}>
        {/* 选中时，添加类名selected */}
        {userChannel.map((item) => (
          <span
            key={item.id}
            className={classnames("channel-list-item")}
            onClick={() => onHomeList(item)}
          >
            {item.name}
            {isEdit ? (
              <Icon type="iconbtn_tag_close" onClick={() => onHref(item)} />
            ) : null}
          </span>
        ))}
      </div>
      <div className={styles.space}></div>
      {/* 可选频道 */}
      <div className={styles.title}>
        <h3>可选频道</h3>
      </div>
      <div className={styles.list}>
        {AllChannel.map(
          (item: {
            id: Key | null | undefined;
            name:
              | string
              | number
              | boolean
              | ReactElement<any, string | JSXElementConstructor<any>>
              | Iterable<ReactNode>
              | ReactPortal
              | null
              | undefined;
          }) => (
            <span
              key={item.id}
              className="channel-list-item"
              onClick={onAddChannel(item as Channel, {
                seq: userChannel.length,
              })}
            >
              + {item.name}
            </span>
          )
        )}
      </div>
    </div>
  );
};
export default Channels;
